import Vue from 'vue'
import {VBtn,VIcon,VImg,VCard,VCardTitle} from 'vuetify/lib'
import {getSiteCar,getSiteCarAns} from "@/api/cars";
import {getOneVender,getOneVenderAns} from "@/api/vender";

interface IData {
    crtId: number,
    venderInfo: any,
    carList: Array<any>
}
export default Vue.extend({
    name: 'VDetail',
    data: (): IData => ({
        crtId: 0,
        venderInfo: {},
        carList: []
    }),
    components: {
        'v-btn': VBtn,
        'v-icon': VIcon,
        'v-img': VImg,
        'v-card': VCard,
        'v-card-title': VCardTitle
    },
    methods: {
        goBack(){
            this.$router.go(-1)
        },
        goCD(carId: string){
            return () => {
                this.$router.push(`/carDetail?carId=${carId}`)
            }
        }
    },
    mounted(){
        //每次跳转到该页面回到顶部
        window.scrollTo(0,0)
        this.crtId = (this.$route.query.vid) as unknown as number
        getSiteCar(this.crtId)
            .then(res => {
                const {code,msg,data} = res as unknown as getSiteCarAns
                if(code === 200){
                    this.carList = data
                }else{
                    console.log(msg)
                }
            })
        getOneVender(this.crtId)
            .then(res => {
                const {code,msg,data} = res as unknown as getOneVenderAns
                if(code === 200){
                    this.venderInfo = data
                }else {
                    console.log(msg)
                }
            })
    },
    render(){
        return (
            <div style={{backgroundImage: 'linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%)',padding: '2vh 2vw'}}>
                <div>
                    {/*返回按钮*/}
                    <v-btn outlined={true} onclick={this.goBack} block={true}>
                        <v-icon drak={true}>
                            mdi-arrow-left
                        </v-icon>
                    </v-btn>
                    {/*商家logo*/}
                        <v-img src={this.venderInfo?.vImg} style={{width: '50vw',margin: '2vh auto'}} />
                    {
                        this.carList?.map(item => {
                            return (
                                <v-card
                                    key={item.carId}
                                    style={{margin: '2vh 0',backgroundImage: 'linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%)'}}>
                                    <v-img
                                        src={item.cPic}
                                    />
                                    <v-card-title style={{color: '#000',backgroundImage: 'linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%)'}}>
                                        <div style={{width: '100%',textAlign: 'right'}}>{item.cName}</div>
                                        <div style={{width: '100%',textAlign: 'right'}}><v-btn outlined={true} onclick={this.goCD(item.carId)}>查看详情</v-btn></div>
                                    </v-card-title>
                                </v-card>
                            )
                        })
                    }
                </div>
            </div>
        )
    }
})